<template>
	<view class = "home">
		<view class="header">
			<view class="left">
				<image src="../../static/images/chat.png" mode=""></image>
			</view>
			<view class="middle">
				<text @click="show=1" :class ="{active:show==1}">推荐</text>
				<text @click="show=2"  :class ="{active:show==2}">品牌</text>
			</view>
			<view class = "right">
				<image src="../../static/images/search.png" mode=""></image>
				<image src="../../static/images/cart.png" mode=""></image>
			</view>
		</view>
		<!-- <view class="swiperenter">
			<view class="middle">
				<text>切割家具系列</text>
				<text>Cutting furniture</text>
			</view>
			<text class = "footer">/此刻魅力生活步入切割时代/</text>
		</view> -->
		<view v-show="show==1" >
			<swiper class = "swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for = "item in list" :key = "item.id"> 
					<view class="swiper-item">
						<image class = "imgs" :src="item.img_url" mode=""></image>
					</view>
					<view class="swiperenter">
						<view class="middle">
							<text>切割家具系列</text>
							<text>Cutting furniture</text>
						</view>
						<text class = "footer">/此刻魅力生活步入切割时代/</text>
					</view>
				</swiper-item>
			</swiper>
			
			
			<view class="suggest">
				<view class="left">
					品牌推荐
				</view>
				<view class="right">
					<text class = "more" @tap = "toFind">更多</text>
					<image src="../../assets/images/arr-r-1.png" mode=""></image>
				</view>
			</view>
			
			<view class="tuijian">
				<view class="enter" v-for = "item in lists" :key = "item.id" @tap = "toFinds(item.id)">
					<view class="bgc">
					<image :src="item.bg_img" mode=""></image>
					</view>
					<view class="bottom">
						<text>{{ item.cname }}</text>
						<text>{{ item.ename }}</text>
					</view>
				</view>
			</view>
			
			<view class="choose">
				<view class="left">
					特色优选
				</view>
				<view class="right">
					<text class = "more">更多</text>
					<image src="../../assets/images/arr-r-1.png" mode=""></image>
				</view>
			</view>
			
			<view class="spacialchoose">
				<view class="enter" v-for = "item in arr" :key = "item.id">
					<view class = "left">
						<image :src="item.cover_img" mode=""></image>
					</view>
					<view class="right">
						<text>{{ item.gname }}</text>
						<text>{{ item.descr }}</text>
						<!-- <view>
							{{ item.colors}}
						</view> -->
						<text>{{ item.detail_desc}}</text>
					</view>
				</view>
			</view>
			
		</view>
		
		
		 <com1 v-show="show==2" :num = "arrs"></com1>
	</view>
</template>

<script>
	import  http  from "../../utils/http.js"
	import com1 from "@/components/brand/brand.vue"
	export default {
		components:{
			com1
		},
		data() {
			return {
				list:[],
				lists:[],
				arr:[],
				arrs:[],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				show:'1',
				isActive:'true',
				
			};
		},
			
		methods:{
			initBanner(){
				http.get("/api/leju/front/home/banners",{
					use:0
				})
				.then(res => {
					console.log(res);
					// this.list.push(...res.data.data)
					this.list = res.data.data;
				})
			},
			initbrandList(){
				http.get("/api/leju/front/find/seriesAll")
				.then(res => {
					console.log(res);
					// this.list.push(...res.data.data)
					this.lists = res.data.data;
				})
			},
				
			inithotList(){
				http.get("/api/leju/front/home/hotList").then(res => {
					console.log(res);
					this.arr = res.data.data;
				})
			},
			initproductList(){
				http.get("/api/leju/front/home/productList").then(res => {
					console.log(res);
					this.arrs = res.data.data.list;
				})
			},
			toFind(){
				uni.switchTab({
					url:"/pages/find/find"
				})
			},
			toFinds(val){
				console.log(val);
				uni.setStorageSync("key",val);
				uni.switchTab({
					url:`/pages/find/find?id=${val}`
				})
				
			}
			
		},
		onLoad(){
			this.initBanner();
			this.initbrandList();
			this.inithotList();
			this.initproductList();
		}
	}
</script>

<style lang="scss" scoped>
	.home{
		padding-top: var(--status-bar-height);
		position:relative;
	}
	.header{
		width:100%;
		position:absolute;
		left:0;
		height: 88rpx;
		display:flex;
		justify-content:space-between;
		align-items: center;
		z-index: 999;
		.left{
			width:42rpx;
			height: 42rpx;
			margin-left:30rpx;
			image{
					width:100%;
					height: 100%;
			}
		}
		.middle{
			width:171rpx;
			height: 60rpx;
			display:flex;
			justify-content: space-between;
			margin-left:60rpx;
			margin-top:15rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FFFFFF;
			letter-spacing: 2.29rpx;
			.active{
				border-bottom:3px solid white;
				
			}
		}
		
		.right{
			width:108rpx;
			height: 36rpx;
			margin-right:30rpx;
			display:flex;
			justify-content: space-between;
			align-items:center;
			image{
				width:36rpx;
				height:36rpx;
			}
		}
		
	}
	.swiperenter{
		width:600rpx;
		height: 196rpx;
		position:fixed;
		left:80rpx;
		top:200rpx;
		z-index:999;
		.middle{
			width:270px;
			height: 80rpx;
			margin:0 auto;
			margin-bottom:92rpx;
			text:first-child{
				text-align:center;
				width:100%;
				height: 59rpx;
				font-weight:bolder;
				font-size: 42rpx;
				color: #FFFFFF;
				letter-spacing: 3px;
				display:block;
			}
			text:nth-child(2){
				text-align:center;
				display:block;
				width:100%;
				height: 22rpx;
				font-family: PingFangSC-Light;
				font-size: 16rpx;
				color: #FFFFFF;
				letter-spacing: 5.6rpx;	
			}
		}
		.footer{
			width:514rpx;
			height: 25rpx;
			font-family: PingFangSC-Light;
			font-size: 18rpx;
			color: #FFFFFF;
			letter-spacing: 20rpx;
		}
	}
	.swiper{
		width:750rpx;
		height: 515rpx;
		background:#f1ece7;
		.imgs{
			width:750rpx;
			height: 516rpx;
			border-radius: 0px 0px 30px 30px;
			background:#f1ece7;
		}
	}
	.suggest{
		width:100%;
		height: 125rpx;
		display:flex;
		justify-content: space-between;
		align-items:center;
		// margin-bottom:39rpx;
		background:#f1ece7;
		.left{
			margin-left:40rpx;
			font-family: PingFangSC-Semibold;
			font-weight: bolder;
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
		}
		.right{
			width:70rpx;
			display:flex;
			justify-content: space-between;
			align-items: center;
			margin-right:39.3px;
			
				.more{
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #8C8C8C;
					letter-spacing: 1.86px;
				}
				image{
					width:11.4rpx;
					height: 18rpx;
					// background: #8D8D8D;
				}
		}
		
	}
	
	.tuijian{
		width:100%;
		display:flex;
		overflow-x:auto;
		overflow-y:hidden;
		justify-content: space-around;
		background:#f1ece7;
		.enter{
			width:208rpx;
			height: 286rpx;
			// margin-left:40rpx;
			.enter:first-child{
				margin-left:22rpx;
			}
			.bgc{
				width:208rpx;
				height: 140rpx;
				background-color: pink;
				// overflow: hidden;
				padding:0.01rpx;
				margin-bottom:70rpx;
				border-radius: 20px;
				background: #FFFFFF;
			}
			image{
				width:144rpx;
				height: 124rpx;
				display:block;
				margin:0 auto;
				margin-top:52rpx;
			}
			.bottom{
				width:150rpx;
				// height: 100px;
				margin:0 auto;
				text:nth-child(1){
					width:150rpx;
					height: 40rpx;
					display:block;
					margin:0 auto;
					font-family: PingFangSC-Semibold;
					font-size: 26rpx;
					color: #3E3E3E;
					letter-spacing: 1.86rpx;
					text-align:center;
				}
				text:nth-child(2){
					width:150rpx;
					height: 40rpx;
					display:block;
					margin:0 auto;
					font-family: PingFangSC-Regular;
					font-size: 20rpx;
					color: #B0B0B0;
					letter-spacing: 1.43rpx;
					text-align:center;
				}
			}
			
		}
	}
	.choose{
		width:100%;
		height: 125rpx;
		display:flex;
		justify-content: space-between;
		align-items:center;
		background:#f1ece7;
		.left{
			margin-left:40rpx;
			font-family: PingFangSC-Semibold;
			font-weight:bolder;
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
		}
		.right{
			width:70rpx;
			display:flex;
			justify-content: space-between;
			align-items: center;
			margin-right:39.3px;
			
				.more{
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #8C8C8C;
					letter-spacing: 1.86px;
				}
				image{
					width:11.4rpx;
					height: 18rpx;
				}
		}
		
	}
	.spacialchoose{
		width:100%;
		display:flex;
		overflow-x: auto;
		overflow-y:hidden;
		background:#f1ece7;
		.enter{
			width:590rpx;
			height: 260rpx;
			flex-shrink: 0;
			margin-left:40rpx;
			border-radius: 20px;
			display:flex;
			justify-content: space-around;
			// background-color: pink;
			margin-bottom:80rpx;
			margin-top:73rpx;
			background: #FFFFFF;
			.left{
				width:194rpx;
				height:280rpx;
				image{
					width:194rpx;
					height:280rpx;
					margin:0 38rpx 34rpx 44rpx;
					margin-top:-52rpx;
					border-radius:20rpx;
				}
			}
			.right{
				height: 160rpx;
				// margin-left:36rpx;
				text:nth-child(1){
					display:block;
					width:168rpx;
					height: 37rpx;
					margin-top:50rpx;
					font-size: 26rpx;
					color: #3E3E3E;
					letter-spacing: 1.86rpx;
				}
				text:nth-child(2){
					display:block;
					width:147rpx;
					height: 25rpx;
					font-size: 18rpx;
					color: #B0B0B0;
					letter-spacing: 1.29rpx;
					margin-top:30rpx;
				}text:nth-child(3){
					display:block;
					width:200rpx;
					font-size: 22px;
					color: #3E3E3E;
					letter-spacing: 1.57px;
					margin-top:37rpx;
				}
				
			}
		}
	}
</style>
